<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <style type="text/css">
        .span-fy{
            padding: 10px 20px;
            background-color: #6c757d;
            border-radius: 4px;
            margin: 0 10px;
        }
        .fy-my{
            background-color: pink;
        }
        .a-def{
            text-decoration: none;
        }
    </style>
</head>
<body style="width: 100%;height: 100%;display: flex;justify-content: center;align-content: center;" >
<div style="width: 80%;height: 80%;">
    <table class="table">
        <tr>
            <th>ID</th>
            <th>名字</th>
            <th>性别</th>
            <th>工作</th>
            <th>工资</th>
            <th>操作</th>

        </tr>
        <tr th:each="cr:${pageInfo.list}">
            <td th:text="${cr.id}">row 1, cell 1</td>
            <td th:text="${cr.name}">row 1, cell 2</td>
            <td th:text="${cr.gender}">row 1, cell 2</td>
            <td th:text="${cr.job}">row 1, cell 2</td>
            <td th:text="${cr.money}">row 1, cell 2</td>
            <th>
                <a th:href="@{/up/{id}(id=${cr.getId()})}"><button type="button">编辑</button></a>
                <a th:href="@{${cr.getId()}}"><button type="button">删除</button></a>
            </th>
        </tr>
    </table>
    <div style="display: flex;justify-content: space-between;align-content: center">
        <div style="justify-content: center;align-content: center">
            <span>共<span th:text="${pageInfo.getTotal()}"></span>条</span>
            <select id="selects" onclick="set()">

                <option value ="1" onclick="set()">1条/页</option>

                <option value ="2" onclick="set()">2条/页</option>

                <option value="3" onclick="set()">3条/页</option>

                <option value="4" onclick="set()">4条/页</option>
                <option value="5" onclick="set()">5条/页</option>
                <option value="6" onclick="set()">6条/页</option>


            </select>

            <a th:href="@{/{pageNum}/{pageSize}(pageNum=1,pageSize=5)}" class="a-def"><span class="span-fy"><</span></a>
            <a th:if="(${pageInfo.getPageNum()}-2)>=${pageInfo.getNavigateFirstPage()}" class="a-def" th:href="@{/{pageNum}/{pageSize}(pageNum=${pageInfo.getPageNum()}-2,pageSize=5)}" >
						<span class="span-fy" th:text="${pageInfo.getPageNum()}-2">
						2
					</span>
            </a>
            <a th:if="${!pageInfo.isFirstPage}" class="a-def" th:href="@{/{pageNum}/{pageSize}(pageNum=${pageInfo.getPageNum()}-1,pageSize=5)}" >
						<span class="span-fy" th:text="${pageInfo.getPageNum()}-1">
						1
					</span>
            </a>
            <a th:if="${pageInfo.PageNum}" class="a-def" >
						<span class="span-fy fy-my" th:text="${pageInfo.getPageNum()}">
						1
					</span>
            </a>
            <a th:if="(${pageInfo.getPageNum()}+1)<${pageInfo.getNavigateLastPage()}" class="a-def" th:href="@{/{pageNum}/{pageSize}(pageNum=${pageInfo.getPageNum()}+1,pageSize=5)}" >
						<span class="span-fy" th:text="${pageInfo.getPageNum()}+1">
						2
					</span>
            </a>
            <span class="span-fy" th:if="${pageInfo.getPageNum()}!=${pageInfo.getNavigateLastPage()}">
						....
					</span>
            <a th:if="${pageInfo.getPageNum()}<=(${pageInfo.getNavigateLastPage()}-1)" class="a-def" th:href="@{/{pageNum}/{pageSize}(pageNum=${pageInfo.getNavigateLastPage()},pageSize=5)}" >
						<span class="span-fy" th:text="${pageInfo.getNavigateLastPage()}">
						2
					</span>
            </a>
            <a th:href="@{/{pageNum}/{pageSize}(pageNum=${pageInfo.getNavigateLastPage()},pageSize=5)}" class="a-def"><span class="span-fy">></span></a>
                <span>
                <span>前往</span>
                <input type="number" value="1" id="pageNum"/>
                <span>页</span>
            </span>
        </div>
        <div>
            <a th:href="@{/inst}"><button type="button">添加</button></a>
        </div>
    </div>
</div>
</body>
<script th:src="@{http://libs.baidu.com/jquery/2.1.4/jquery.min.js}" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    var pageSize;
    function set() {
        var t = document.getElementById("selects");

        pageSize = t.options[t.selectedIndex].value; // 选中值

        console.log(pageSize)
    }
    set()

    $("#pageNum").blur(function () {
        var pageNum = $("#pageNum").val()
        var pagedata=[{'pageNum':pageNum,'pageSize':pageSize}]
        console.log(pagedata)

        $.ajax({
            type:'post',
            url:"/"+pageNum+"/"+pageSize+"",
            data:{page:pagedata},
            success:function (jsonData) {

            }
        })
    })
</script>
</html>